<template>
    <div>
        <!-- 编辑报名信息 -->
        <el-dialog title="编辑报名信息" :visible.sync="formVisible" width="30%">
            <el-form label-width="80px" :model="form" size="samll">
                <el-form-item label="姓名" >
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="班级" >
                    <el-input v-model="form.cla"></el-input>
                </el-form-item>
                <el-form-item label="学号" >
                    <el-input v-model="form.num"></el-input>
                </el-form-item>
                <el-form-item label="方向" >
                    <el-input v-model="form.direction"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" >
                    <el-input v-model="form.contact"></el-input>
                </el-form-item>
                
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="makesurechange">确定修改</el-button>
            </div>
        </el-dialog>

        <!-- 删除报名信息 -->
        <el-dialog
            title="提示"
            :visible.sync="deVisible"
            width="30%">
            <span>确认删除 {{this.temp.name}} 的报名信息吗</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deVisible = false">取 消</el-button>
                <el-button type="primary" @click="deletemem">确 定</el-button>
            </span>
            </el-dialog>
        <!-- 头部 -->
        <div class="top">
            报名人数:<span>{{signupcount}}</span>
            <el-button type="primary" plain size="middle" class="daochu" @click="daochu">导出</el-button>
        </div>
        <!-- 表格 -->
        <el-table
        :data="tableData"
        border
        :header-cell-style="headStyle"
            :cell-style="rowStyle"
        @row-click="rowid"
        row-key="id"
        style="width: 100%">
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="cla"
                label="班级"
                width="180">
            </el-table-column>
            <el-table-column
                prop="num"
                label="学号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="direction"
                label="方向">
            </el-table-column>
            <el-table-column
                prop="contact"
                label="联系方式">
            </el-table-column>
            <el-table-column label="操作">
                <el-button type="primary" plain size="small" @click="edit">编辑</el-button>
                <el-button type="danger" plain size="small" @click="deVisible=true">删除</el-button>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    data(){
        return{
            //表格数据
            tableData: [],
            //报名人数
            signupcount:0,
            //存储中途的每行的表格信息
            temp:{},
            //编辑成员表单信息
            form:{
                name:"",
                cla:"",
                num:"",
                direction:"",
                contact:""
            },
            formVisible:false,
            //删除报名
            deVisible:false
        }
    },
    methods:{
        //获得人数
        getcount(){
            this.$axios.post('/Apply/countAll',{Headers:{Authorization:sessionStorage.getItem('token')}}).then((result) => {
                this.signupcount = result.data.result;
            }).catch((err) => {
                console.log(err)
            });
        },
        //获取成员
        getmembers(){
            this.$axios.post('/Apply/findAll',{Headers:{Authorization:sessionStorage.getItem('token'),'Content-Type': 'application/json'}}).then((res)=>{
                res.data.result.forEach(i => {
                    this.tableData.push(i);
                });
            })  
        },
        //编辑功能
        edit(){
            this.formVisible = true;
        },
        //删除功能
        deletemem(){
            this.deVisible = false;
            this.$axios.post('/Apply/deleteOne',{
                id:this.temp.id,
                Headers:{Authorization:sessionStorage.getItem('token')}
            }).then(()=>{
                this.$router.go(0)
            })
        },
        //确认修改信息
        makesurechange(){
            this.formVisible = false;
            this.$axios.post('/Apply/updataApply',{
                id:this.form.id,
                num:this.form.num,
                cla:this.form.cla,
                name:this.form.name,
                contact:this.form.contact,
                direction:this.form.direction,Headers:{Authorization:sessionStorage.getItem('token')}
            }).then(()=>{
                this.$router.go(0)
                
            })
        },
        //导出报名表
        daochu(){
            var xhr = new XMLHttpRequest();
            xhr.open("post", 'http://39.108.110.150:8006/Wings/Apply/exportstuExcel.do', true)
            xhr.responseType = "blob";
            xhr.setRequestHeader("client_type", "DESKTOP_WEB");
            xhr.setRequestHeader("Authorization", sessionStorage.getItem('token'));			// 自定义请求头
            xhr.onload = function(){
                if(this.status == 200){
                    var blob = this.response;
                    var fileName = '名单';
                    if(window.navigator.msSaveOrOpenBlob){			// IE浏览器下
                        navigator.msSaveBlob(blob, fileName);
                    } else {
                        var  link = document.createElement("a");
                        link.href = window.URL.createObjectURL(blob);
                        link.download = fileName+'.xls';
                        link.click();
                        window.URL.revokeObjectURL(link.href);
                    }
                }
            };
            xhr.send({})
        },
        //获得行信息
        rowid(row){
            console.log(row);
            this.temp.id = row.id;
            this.temp.name = row.name;
            this.temp.num = row.num
            this.temp.cla = row.cla;
            this.temp.contact = row.contact;
            this.temp.direction = row.direction;
            //修改form表单信息
            this.form.id = row.id;
            this.form.name = row.name;
            this.form.num = row.num
            this.form.cla = row.cla;
            this.form.contact = row.contact;
            this.form.direction = row.direction;
        },
        //居中函数
        rowStyle(){
            return "text-align:center" 
        },
        headStyle(){
            return "text-align:center"
        }
    },
    //生命周期函数
    created(){
        this.getcount();
        this.getmembers();
    }
    
}
</script>

<style scoped>
    .top{
        height: 50px;
        width: 100%;
        margin: 5px auto;
        background-color: #f2f2f2;
        line-height: 40px;
        text-align: left;
        text-indent: 2em;
        line-height: 50px;
    }
    .daochu{
        position: relative;
        left: 80%;
    }
</style>